<template>
<!-- 工程加扣款高级搜索 -->
    <div class="e-form searchDialog" style="padding-top: 20px;">
        <div class="form">
            <el-form
                label-width="150px"
                :model="searchForm"
            >
                <!-- 机构 -->
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="所属机构：">
                            <el-input
                                v-model="searchForm.orgName"
                                placeholder="请输入内容"
                            >
                                <i slot="suffix" class="el-input__icon el-icon-document-copy" style="width:28px"
                                    @click="onSelectOrg"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 外包方名称 -->
                <el-row>
                    <el-col :span="24">
                         <el-form-item label="外包方：">
                            <div class="selectBox" @click="selectChange">
                                  <div class="itemBox">
                                    <i slot="suffix" class="el-input__icon el-icon-document-copy repleceIcon"
                                    @click.stop="supplierOrg"
                                    ></i>
                                  </div>
                                  <div class="itemBox topClearance" :class="isSelect&&'noTop'">
                                      <i class="triangleBox el-icon-arrow-down" :class="isSelect&&'openTriangleBox'"></i>
                                  </div>
                                  <div class="optionBox" :class="isSelect&&'showOptionBox'">
                                    <ul class="ulBox" :class="isSelect&&'showUlBox'" @click.stop="noTopEvent">
                                        <li class="itemLiBox" v-for="item in outList" :key="item.value">
                                            <div class="leftLiBox">{{item.label}}</div>
                                            <div class="rightLiBox" @click.stop="clickItem(item.value)">
                                                <i class="el-icon-delete" style="color:#606266"></i>
                                            </div>
                                        </li>
                                        <li v-if="!outList.length" class="noDataItem">
                                                暂无数据
                                        </li>
                                    </ul>
                                  </div>

                            </div>
                         </el-form-item>
                    </el-col>
                </el-row>
                <!-- 日期 -->
                <el-row>
                    <el-col :span="24">
                       <el-form-item label="结算日期：">
                            <div style="display:flex; width: 100%;">
                                <el-date-picker v-model="searchForm.beginDate" style="flex:1"> </el-date-picker>
                                <span class="separate">—</span>
                                <el-date-picker arrow-control v-model="searchForm.endDate"  style="flex:1">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 加扣款类型 -->
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="加扣款类型：">
                            <el-checkbox
                                v-model="plusDeductionCheckAll"
                                @change="plusDeductionAll"
                                >全选</el-checkbox
                            >
                            <span class="spacing"></span>
                            <el-checkbox-group v-model="searchForm.settlementTypes"
                            @change="plusDeductionChange"
                            >
                                <el-checkbox
                                    v-for="item in plusDeductionList"
                                    :key="item.id"
                                    :label="item.id"
                                >{{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 状态 -->
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="状态：">
                            <el-checkbox
                                v-model="stateCheckAll"
                                @change="stateAll"
                                >全选</el-checkbox
                            >
                            <span class="spacing"></span>
                            <el-checkbox-group v-model="searchForm.states"
                            @change="stateChange"
                            >
                                <el-checkbox
                                    v-for="item in stateList"
                                    :key="item.id"
                                    :label="item.id"
                                >{{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="noneBox">{{localSearchData}}</div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
// eslint-disable-next-line no-unused-vars
import { selectDataClient, openAppClient } from '@/utils/common'
export default {
    data () {
        return {
            searchForm: {
                orgId: '',
                orgName: '',
                outsourcerIds: [],
                states: [],
                settlementTypes: [],
                beginDate: '',
                endDate: ''
            },
            //状态
            stateList: [{ name: '草稿', id: 0 }, { name: '审核中', id: 1 }, { name: '已审核', id: 2 }],
            stateCheckAll: false, //状态-是否全选
            //加扣款类型
            plusDeductionList: [{ name: '工程加扣款', id: 1 }, { name: '材料加扣款', id: 3 }, { name: '周材加扣款', id: 5 }, { name: '设备加扣款', id: 4 }, { name: '其他加扣款', id: 2 }],
            plusDeductionCheckAll: false, //加扣款类型-是否全选
            //查询外包方参数
            supplierParmes: {
                'orgId': '',
                'type': [0, 1, 2, 3],
                'page': 1,
                'keyword': null,
                'states': null,
                'limit': 20,
                'supplierTypes': null,
                'subcontractorTypes': null,
                'businessTypes': null,
                'businessUnitTypes': null,
                'factoOutSourcerType': null
            },
            //外包方展示数组
            outList: [],
            //下拉框参数
            isSelect: false,
        }
    },
    mounted () {
        this.searchForm.orgId = localStorage.getItem('searchOrgId')
        this.searchForm.orgName = localStorage.getItem('searchOrgName')
    },
    computed: {
        localSearchData () {
            // 默认设置搜索标志为false，则不进行搜索回调
            const searchForm = this.searchForm
            searchForm.searching = false
            this.setSearchData(searchForm)
            return searchForm
        }
    },
    methods: {
        ...mapMutations(['setSearchData', 'setSelectedInfo']),
        //临时数据
        tempOutList () {
            const list = [ { 'label': '9.13分包商新增李艳玲', 'value': null }, { 'label': '测试233', 'value': null }, { 'label': '沈一万9.21分包商01', 'value': null }, { 'label': '绵阳锦城建筑劳务有限公司', 'value': 'a99314b88825-8467-eb42-c55b-f60152ff' }, { 'label': '四川浩橼建筑工程有限责任公司', 'value': 'a99314b8a20a-9192-3949-be2b-7a1e7d20' }, { 'label': '四川信达建筑工程有限公司', 'value': 'a99314b8e54e-bb8b-874b-22b5-3b001a29' }, { 'label': '江油市全益劳务有限公司', 'value': 'a99314b8be5c-8cd7-6a45-e03f-b4498046' }, { 'label': '自贡市亿达土木建筑工程有限公司', 'value': 'a99314b94578-8f11-a445-a8fb-374d1fcf' }, { 'label': '四川泸州锦盛达建筑劳务有限公司', 'value': 'a99314b95806-9054-b84c-adab-f812d786' }, { 'label': '成都石力劳务有限责任公司', 'value': 'a99314b986ef-8e55-e44d-04c6-d0c36194' }, { 'label': '四川省三台县建安劳务输出有限责任公司', 'value': 'a99314b98d39-8d9c-ef46-bc03-5887d6c1' }, { 'label': '北京安辰嘉业建筑工程有限公司', 'value': 'a99314b9c5be-97fb-ac4f-b9a2-3a07af81' }, { 'label': '冶金工业部华东勘察基础工程总公司', 'value': 'a99314b9f7f8-807d-9c49-cbcd-8e111752' }, { 'label': '四川振华建筑劳务有限公司', 'value': 'a99314ba2dcb-8ae1-9e4d-7e85-77ad7530' } ]
            return list
        },
        //获取本机构以及下级机构
        onSelectOrg () {
            selectDataClient({
                SelectServiceToken: '/hr/org/getChildrenOrg', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[])
                InitParamsStr: '',    // 接口参数(name为模拟参数)
                Title: '选择机构' // 标题
            }).then(data => {
                const val = data[0]
                this.searchForm.orgId = val.orgId
                this.searchForm.orgName = val.orgName
            })
        },
        //选择外包方
        supplierOrg () {
            selectDataClient({
                SelectServiceToken: 'GeneralSelectOuter', // 客户端对应方法名
                IsSingleMode: false, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[])
                InitParamsStr: JSON.stringify(this.supplierParmes), // 接口参数(name为模拟参数)
                Title: '选择外包方' // 标题
            }).then(val => {
                const list = []
                const showList = []
                val.forEach(item=>{
                    list.push(item.outerId)
                    showList.push({ label: item.outerName, value: item.outerId })
                })
                this.outList = showList
                this.searchForm.outsourcerIds = showList
            })
        },
        //状态-是否全选事件
        stateAll (val) {
            this.searchForm.states = val ? this.stateList.map(item=>item.id) : []
        },
        //状态-不同状态是否勾选事件
        stateChange (val) {
            this.stateCheckAll = val.length == this.stateList.length
        },
        //加扣款类型-是否全选事件
        plusDeductionAll (val) {
            this.searchForm.settlementTypes = val ? this.plusDeductionList.map(item=>item.id) : []
        },
        //加扣款类型-不同状态是否勾选事件
        plusDeductionChange (val) {
            this.plusDeductionCheckAll = val.length == this.plusDeductionList.length
        },
        //下拉框开关事件
        selectChange () {
            this.isSelect = !this.isSelect
        },
        //该事件仅用于阻止事件冒泡
        noTopEvent () {},
        //下拉框中元素点击事件
        clickItem (value) {
            this.outList = this.outList.filter(item=>item.value != value)
            this.searchForm.outsourcerIds = this.searchForm.outsourcerIds.filter(item=>item != value)
        }
    },
}
</script>

<style lang="scss" scoped>
.searchDialog{
    ::v-deep.el-input--suffix{
        i{display: flex; align-items: center;}
    }
    .el-checkbox-group{display: flex;}
    ::v-deep.el-checkbox{display: flex; align-items: center;}
}
.noneBox {
    display: none;
}
.spacing {
    margin-left: 20px;
}
.bigBox {
    width: 100%;
    display: flex;
    .leftBox {
        width: 96%;
    }
    .rightBox{
        width: 4%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.selectBox {
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    width: 100%;
    height: 32px;
    display: flex;
    flex-direction:row-reverse;
    position: relative;
    cursor: pointer;
    .itemBox {
        width: 46px;
        height: 100%;
        color: #C0C4CC;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }
    .topClearance {
        padding-top: 4px;
    }
    .noTop{
        padding-top: 0;
    }
    .triangleBox {
        transition: 0.5s;
        transform: rotateX(0);
    }
    .openTriangleBox {
         transform: rotateX(180deg);
    }
    .optionBox {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 0px;
        transition: 0.5s;
        z-index: 10;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(169, 169, 169, 0.356);
        box-sizing: border-box;
        margin: 5px 0;
        padding: 0;
        .ulBox {
            height: 0;
            overflow: hidden;
            overflow-y: auto;
            display: none;
            border: none;
            margin: 0;
            .itemLiBox {
                box-sizing: border-box;
                display: flex;
                align-items: center;
                height: 40px;
                .leftLiBox {
                    width: 90%;
                    font-size: 14px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    color: #606266;
                }
                .rightLiBox {
                    width: 10%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .noDataItem {
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 18px;
                color: #909399;
            }
        }
        .showUlBox {
            display: block;
            height: 100%;
        }

    }
    .showOptionBox {
        top: 50px;
        height: 300px;
        border: 1px solid #e4e7ed;
        padding: 4px 24px;
    }
}
.repleceIcon {
    line-height: 34px;
}
</style>